<template>
  <div class="content">
    <div class="common-seach-wrap">
      <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="古庙名称">
          <el-input v-model="searchForm.name" placeholder="请输入古庙名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            v-model="searchForm.contact_name"
            placeholder="请输入联系人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="searchForm.contact_phone"
            placeholder="请输入联系电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 200px"
          >
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="审核中" value="reviewing"></el-option>
            <el-option label="进行中" value="in_progress"></el-option>
            <el-option label="已完成" value="completed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.time_range"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getTableInfo">搜索</el-button>
          <el-button
            type="info"
            @click="
              searchForm = {
                name: '',
                contact_name: '',
                contact_phone: '',
                status: '',
                time_range: [],
              }
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--搜索表单-->
    <el-alert v-if="count.length" type="info" show-icon :closable="false">
      <div class="common-table-tip">
        <div class="tip-title">状态说明</div>
        <div class="tip-content">
          <div>
            <el-tag type="info">待处理</el-tag> 申请已提交，等待管理员审核
            <el-tag type="danger">{{ count[0] }}</el-tag>
          </div>
          <div>
            <el-tag type="warning">审核中</el-tag> 管理员正在审核申请
            <el-tag type="danger">{{ count[1] }}</el-tag>
          </div>
          <div>
            <el-tag type="primary">进行中</el-tag> 古庙修缮中，<b style="color: #e6a23c"
              >此状态下的古庙会在小程序中显示</b
            >
            <el-tag type="danger">{{ count[2] }}</el-tag>
          </div>
          <div>
            <el-tag type="success">已完成</el-tag> 古庙修缮已完成
            <el-tag type="danger">{{ count[3] }}</el-tag>
          </div>
        </div>
      </div>
    </el-alert>
    <el-table :data="tableData" row-key="id" height="100%" stripe :border="true">
      <el-table-column prop="id" label="ID" fixed="left" width="50"></el-table-column>
      <el-table-column prop="submitter" label="ID" fixed="left" width="50"></el-table-column>
      <el-table-column prop="" label="名称">
        <template #default="scope">
          <el-button type="primary" link @click="handleOpen(scope.row)">
            {{ scope.row.name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="" label="图片">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.image_url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="scope.row.images"
            show-progress
            :initial-index="4"
            fit="cover"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="contact_name" label="联系人" />
      <el-table-column prop="contact_phone" label="联系电话" />
      <el-table-column prop="add_date" label="状态">
        <template #default="scope">
          <el-tag :type="getStatusTag(scope.row.status)">{{ scope.row.status_text }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="400" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="handleOpen(scope.row)"> 详情 </el-button>
          <el-button
            type="success"
            link
            @click="handleStatus(scope.row)"
            v-if="scope.row.status == 'pending'"
          >
            更新状态
          </el-button>
          <el-button type="danger" link @click="delInfo(scope.row.manager_id)"> 删除 </el-button>
          <el-button type="warning" link @click="handlePoints(scope.row)"> 奖励积分 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider border-style="none" />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="curPage"
      :page-size="pageSize"
      layout="total, sizes,prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <Dialog ref="infoDrawer" />
    <Points ref="pointsDrawer" />
    <Status ref="statusDrawer" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, reactive, watch, provide, computed } from "vue";
import Dialog from "./component/dialogForm.vue";
import Points from "./component/points.vue";
import Status from "./component/status.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteManagerApi, getManagerListApi } from "@/api/babycar";
import { deleteApi, getListApi } from "@/api/temple";
import { get } from "@vueuse/core";
const total = ref(0);
const curPage = ref(1);
const pageSize = ref(20);
const tableData = ref([]);
const infoDrawer = ref<any>(null);
const pointsDrawer = ref<any>(null);
const statusDrawer = ref<any>(null);
const searchForm = ref({
  name: "",
  contact_name: "",
  contact_phone: "",
  status: "",
  time_range: [],
});
const count = computed(() => {
  return [
    tableData.value.filter((item: any) => item.status == "pending").length,
    tableData.value.filter((item: any) => item.status == "reviewing").length,
    tableData.value.filter((item: any) => item.status == "completed").length,
    tableData.value.filter((item: any) => item.status == "canceled").length,
  ];
});
onMounted(() => {
  getTableInfo();
});
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getTableInfo();
};
const handleCurrentChange = (val: number) => {
  curPage.value = val;
  getTableInfo();
};
function getTableInfo() {
  getListApi({
    page: curPage.value,
    limit: pageSize.value,
  }).then((res: any) => {
    tableData.value = res.data;
    total.value = res.count;
  });
}
const getStatusTag = (status: string) => {
  switch (status) {
    case "completed":
      return "success";
    case "reviewing":
      return "warning";
    case "pending":
      return "info";
    default:
      return "primary";
  }
};
function delInfo(id: number) {
  ElMessageBox.confirm("确认要删除该条记录吗?", "警告！", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteApi(id).then((res: any) => {
        getTableInfo();
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
}

// 打开添加数据窗口
const emits = defineEmits(["openForm", "search"]);
function handleOpen(row?: any) {
  infoDrawer.value.open(row);
}
function handlePoints(row: any) {
  pointsDrawer.value.open(row);
}
function handleStatus(row: any) {
  statusDrawer.value.open(row);
}
defineExpose({
  getTableInfo,
});
</script>

<style lang="scss">
.common-seach-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-input {
    width: 300px;
  }
}
.el-table {
  margin-top: 10px;
}
.table-box {
  height: calc(100% - 200px);
}
.common-table-tip {
  .tip-title {
    font-size: 16px;
  }
  .tip-content {
    display: flex;
    align-items: center;
    margin-top: 10px;
    div {
      margin-right: 10px;
    }
  }
}
</style>
